<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>区域考核</title>
    <link href="<%=basePath%>resources/css/common.css"  rel="stylesheet">
    <script src="<%=basePath %>resources/js/common/plugin/jquery/jquery.min.js"></script>
    <style type="text/css">
   		body,
		div,
		dl,
		dt,
		dd,
		ul,
		ol,
		li,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		pre,
		form,
		fieldset,
		input,
		textarea,
		p,
		blockquote,
		th,
		td,
		tr,
		table {
		    margin: 0;
		    padding: 0;
		    -webkie-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		}
		
		ol,
		ul {
		    list-style: none;
		}
		
		iframe {
		    border: none;
		}
		
		a {
		    text-decoration: none;
		    color: #666;
		}
		
		a:focus,
		a:hover {
		    text-decoration: none;
		}
		
		.center {
		    text-align: center;
		}
		
		.label {
		    text-shadow: none;
		    background: none;
		    color: #666;
		    font-weight: 400;
		    margin-bottom: 0;
		}
		
		.dn {
		    display: none;
		}
		
		.db {
		    display: block;
		}
		
		.pr {
		    position: relative;
		}
		
		.pa {
		    position: absolute;
		}
		
		.fl {
		    float: left;
		}
		
		.fr {
		    float: right;
		}
		/*.clearfix {clear: both;}*/
		
		.clearfix {
		    zoom: 1;
		}
		
		.clearfix:after {
		    display: block;
		    clear: both;
		    content: "";
		    visibility: hidden;
		    height: 0;
		    font-size: 0;
		}
		
		body {
		    width: 1130px;
		    margin: 0 auto;
		    font-size: 14px;
		    padding: 10px 0px;
		}
		
		.header {
		    background: white;
		    height: 148px;
		    padding: 10px;
		}
		
		.header img {
		    width: 62px;
		    height: 58px;
		}
		
		.header .transportation {
		    font-size: 20px;
		    font-weight: bolder;
		    margin-top: 15px;
		}
		
		.header .time {
		    margin-top: 7px;
		}
		
		.header .spanColor {
		    color: #FF9900;
		    font-size: 20px;
		    font-weight: bold;
		    padding: 0 5px;
		}
		
		.header a {
		    color: #00ccff;
		    text-decoration: underline;
		    margin-left: 5px;
		}
		
		.detailData {
		    margin-top: 2px;
		    background: white;
		    width: 735px;
		    height: 115px;
		    padding-top: 25px;
		}
		
		.detailData ul {
		    display: inline-block;
		    height: 60px;
		}
		
		.detailData li {
		    list-style: none;
		    height: 85px;
		}
		
		.detailData .line {
		    display: inline-block;
		    width: 1px;
		    background: #ccc;
		    height: 85px;
		}
		
		.detailData .data {
		    width: 180px;
		    text-align: center;
		}
		
		.detailData span {
		    border-bottom: none;
		    color: #00ccff;
		    font-size: 32px;
		    font-weight: 400;
		    border-bottom:none !important;
		}
		
		.detailData p {
		    color: #ccc;
		}
		
		.assessment {
		    margin-top: 20px;
		}
		
		.assessment .assessmentTop {
		    background: #99ccff;
		    padding: 0 5px;
		    width: 100%;
		    height: 30px;
		    list-style: 30px;
		}
		
		.aTopLeft {
		    line-height: 30px;
		    color: white;
		}
		
		.aTopRight {
		    margin-top: 7px;
		}
		
		#assessment {
		    width: 100%;
		    height: 270px;
		    background: white !important;
		}
		
		.regional .regionalTop {
		    background: #99ccff;
		    padding: 0 5px;
		    width: 100%;
		    height: 30px;
		    list-style: 30px;
		    color: white;
		    margin-top: 20px;
		}
		
		.regionalTop .rTopLeft {
		    line-height: 30px;
		}
		
		.regionalTop .rTopRight {
		    margin-top: 7px;
		}
		
		#regional {
		    width: 100%;
		    height: 100px;
		    background: white;
		}
		
		.alarm {
		    margin-top: 20px;
		}
		
		.alarmTop {
		    background: #99ccff;
		    padding: 0 5px;
		    width: 100%;
		    height: 30px;
		    list-style: 30px;
		    color: white;
		}
		
		.alarmTop .rTopLeft {
		    line-height: 30px;
		}
		
		.alarmTop .rTopRight {
		    margin-top: 7px;
		}
		
		.alarmBottom {
		    height: 300px;
		    background: white;
		}
		
		#abLeft {
		    width: 40%;
		    height: 100%;
		}
		
		#abRight {
		    width: 58%;
		    height: 100%;
		}
		
		.regionalBottom {
		    background: white;
		    height: auto;
		}
		
		.regionalBottom table {
		    border-collapse: collapse;
		    width: 1100px;
		}
		
		.regionalBottom tr th {
		    height: 35px;
		    border-collapse: collapse;
		    border: 1px solid #ccc;
		    font-weight: normal;
		}
		
		.regionalBottom td {
		    height: 35px;
		    border-collapse: collapse;
		    border: 1px solid #ccc;
		}
		/* #ajax-loading,#mask{display:block;} */
		
		#leftCity li,
		#rightCity li {
		    cursor: pointer;
		}
		
		.alarm .barechart .list {
		    cursor: pointer;
		}
		
		tr,
		th,
		td {
		    border: 1px solid #dedede;
		}
		
		th,
		td {
		    height: 25px;
		    padding: 0 10px;
		}
		
		body ol,
		body ul,
		body .qmbox ul li {
		    list-style: none;
		}
		
		.qmbox ul li {
		    list-style: none !important;
		}
    </style>
    <script type="text/javascript">
    	$(document).ready(function(){    	
    		var params ={
    				year : $('#year').val(),
    				timeType : $('#timeType').val(),
    				detail:$('#detail').val(),
    				areaId : $('#areaId').val(),
    				queryType : $('#queryType').val(),
    				queryTime : $('#queryTime').val()    				
    		};
    		var baseUrl =$('#url').val();
    		$.ajax({
    			type : 'post',
    			async : false,
    			url : baseUrl,
    			cache : false,
    			data:params,
    			dataType : "jsonp",
    			jsonp: 'jsonpCallback',
    			success : function(data) {
    				
    				$('#vehicleNetCount').html(data.vehicleNetCount);
    				$('#vehicleCount').html(data.vehicleCount);
    				$('#enterpriseCount').html(data.enterpriseCount);
    				$('#dealRate').html(data.dealRate);
    				$('#weekens').html(data.timeType);
    				$('#table').html(data.resultList);
    				$('#contacts').html(data.contacts);
    				$('#rank').html(data.order);
    				$('#details').html(data.timeType);
    				$('#start_end').html(data.detail);
    				$('#pic').attr("src",data.pic+"/image/pic/email/icon.png");
    			}	
    		});
    		
    	});
    </script>
</head>

<body id='mailContentContainer' >
	<input type="hidden" id='year' value="${year}">
	<input type="hidden" id='timeType' value="${timeType}">
	<input type="hidden" id='detail' value="${detail}">
	<input type="hidden" id='areaId' value="${areaId}">
	<input type="hidden" id='queryType' value="${queryType}">
	<input type="hidden" id='queryTime' value="${queryTime}">
	<input type="hidden" id='url' value="${url}">
	<div style="border: 3px solid #eeeaea ;width:100%;">
	<div style="padding: 10px 10px;">
    <div class="header">
        <img  id="pic" alt="">
        <p class="transportation">尊敬的 <span id='contacts'></span>，您好：</p>
        <p class="time">
        	<span class="spanColor" style="color: #FF9900;font-size: 20px;font-weight: bold;padding: 0 5px;" id="details"></span>
        	<span id='start_end'></span>  排名第  
        	<span class="spanColor" id='rank'></span> 名</p>
    </div>
    <div class="detailData">
        <ul class="clearfix">
            <li class="data fl">
                <span id='vehicleCount'></span>
                <p>车辆总数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
                <span id='vehicleNetCount'></span>
                <p>入网总数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
                <span id='enterpriseCount'></span>
                <p>业户数</p>
            </li>
            <li class="line fl"></li>
            <li class="data fl">
                <span id='dealRate'></span>
                <p>处警率</p>
            </li>
        </ul>
    </div>

    <div class="regional">
        <div class="regionalTop clearfix" style='width:1100px'>
            <div class='fl rTopLeft'>
            	区域考核
            </div>
        </div>
       <div class="regionalBottom"><table cellspacing='0'>
       		<thead bgcolor='#eee' style="font-size:13px;"> 
					<tr>
						<th>排名</th>
						<th>得分</th>
						<th>区域名称</th>
	        			<th>入网率(%)</th>
	        			<th>上线率(%)</th>
						<th>在岗率(%)</th>
	        			<th>轨迹完整率(%)</th>
	        			<th>数据合格率(%)</th> 
	        		</tr>
	        </thead>
                <tbody id="table">
                	
                </tbody>
            </table>
        </div>
    </div>
     </div>
    </div>
</body>

</html>